SENSORIUM · 感官视觉语言系统

01 · 基础

色彩

三套主题，对应三种语境。点击主题卡片即可在整套系统中实时切换。强调色克制使用——每幅构图仅取一处。

铂蓝

屏幕 · 编辑 · 数据前置

暖砂

印刷 · 报告 · 礼品器物

墨金

展陈 · 数据可视化 · 仪器

铂蓝 — #F2F4F8 基底 · 屏幕与数字

表面

--paper#F2F4F8

--paper-2#FFFFFF

--paper-3#E7EAF1

--rule#D4D7E0

墨色

--ink#000F14

--ink-2#1F2533

--ink-3#6B7185

--ink-4#A8ADC0

强调

--deep-blue#1E2A8A

--tech-purple#6B68FF

--rose#FF5C4B

暖砂 — #F4F1EA 基底 · 印刷与出版

表面

--paper#F4F1EA

--paper-2#EBE6DA

--paper-3#DDD6C5

--rule#C8C2B5

墨色

--ink#1A1814

--ink-2#3A3530

--ink-3#6B665C

--ink-4#9A9388

强调

--oxide#8B3A2F

--moss#5D6D52

--indigo#2C3E5C

墨金 — #0B0E14 基底 · 展陈与数据仪器

表面

--night#0B0E14

--night-2#14161F

--night-3#1F2230

--rule#2A2D38

墨色（暗底）

--cream#E8E2D2

--cream-2#C4BEB2

--cream-3#8A8278

强调

--gold#C9A86A

--mint#7DD3C0

--rose-dk#D88578

02 · 基础

字体

Newsreader 承载编辑之声——宽裕的光学尺寸，标题处收紧字距。JetBrains Mono 处理所有标签、元数据与代码。思源宋体（Noto Serif SC）将二者延展至中文。

字号梯度 · Newsreader

Hero

Field

Newsreader 300
clamp(64–124px)
lh 0.96 · ls −0.028em
.t-hero

Display

Sensory Atlas

Newsreader 300
clamp(40–76px)
lh 1.02 · ls −0.02em
.t-display

H1

The six-layer narrative

Newsreader 300
clamp(32–52px)
lh 1.08 · ls −0.018em
.t-h1

H2

Somatic-Experiential Link

Newsreader 400
clamp(22–30px)
lh 1.2 · ls −0.01em
.t-h2

H3

Domain over prompt

Newsreader 400
18px · lh 1.3
.t-h3

Body

Not AI as a copywriter, but AI as a qualitative-research engine — disciplined by sensory science to decompose the black box of experience.

Newsreader
16px · lh 1.68
max-width 60ch
.t-body

Small

Annotation and supporting copy at small sizes

Newsreader
14px · lh 1.6
.t-small

Caption

Plate I · The Somatic-Experiential Efficacy Link

Newsreader Italic
13px · lh 1.5
.t-caption

Label

§ A Field Guide · MMXXVI

JetBrains Mono
11px · UPPERCASE
ls 0.18em · .label

Micro

VOL. I · NO. 01 · MMXXVI

JetBrains Mono
9–10px · UPPERCASE
ls 0.2em

中文伴随体 · 思源宋体

Display CN

感官转译图集

Noto Serif SC 300
与 Display 配对

Body CN

将感知转译为共识——那种隐秘的语法

Noto Serif SC 300
16px · lh 1.85

03 · 基础

间距

4px 基准单位。所有间距决策均为 4 的倍数。梯度刻意采用非线性——微观处紧凑，区段处宽裕。

04 · 基础

分割线

0.5px 细线是系统的结缔组织。两种权重：墨色（结构性）与规则线（柔和、分隔性）。装饰性边框绝不重于 1px。

--hair · 墨色分割线

0.5px solid var(--ink) · 结构分隔、区段边框、外框

--hair-soft · 规则分割线

0.5px solid var(--rule) · 分隔、区段内、网格线

强调线 · 引文边框

1px solid var(--accent) · 仅用于引文左边框与激活态

05 · 基础

动效

悬停任意行即可在轨道上预览其时长。中性而克制——200–280ms ease-in-out 是基准手感。审慎，而非迟缓。

--dur-micro

120ms

复选框、标记、量表格

--dur-default

220ms

按钮、悬停态、导航项

--dur-emphasis

320ms

主题切换、面板展开

--dur-page

480ms

页面转场、缎带绘制

缓动曲线

--ease

cubic-bezier(0.4, 0, 0.2, 1)

默认 · 进出平衡

--ease-enter

cubic-bezier(0, 0, 0.2, 1)

进入元素 · 快起

--ease-exit

cubic-bezier(0.4, 0, 1, 1)

退出元素 · 快收

05 · 组件

标记

胶囊形元数据标签。描边用于被动类别，填充用于状态或主分类。每组至多 3–4 枚。

98 个签名 PCA · density 否定图谱

描边标记

Mono 10px · 0.5px border · border-radius 999px

嗅觉已部署 ↗ B · 感官

混合状态标记

Filled chip: bg --ink, color --bg · active / status

07 · 组件

引文

每个页面区段仅一处。始终倾斜，始终 Newsreader。左边框 1px 强调色。每行至多 28 字符。

真正的工作不在于写出更好的提示，
而在于写出提示必须遵循的语法。

引文

Newsreader Italic 300 · clamp(22–32px) · lh 1.25 · border-left 1px var(--accent) · pl 22px

08 · 组件

规格栅格

四列统计展示。上下以细线分隔。数字用展示衬线体，标签用等宽微型字。关键值施以强调色。

98

签名数

0.42

否定分

6

叙事层

B→F

催化边

规格栅格

4-col grid · 36px serif 300 value · 9px mono label · hair border top + bottom

09 · 组件

代码块

用于结构定义、YAML 与技术注释。四种令牌类：键（.k）、值（.v）、注释（.c）、字符串（.s）。背景为 --bg-2。

# bridge_schema_v2.yaml — narrative-density schema layer: B_sensory density_signature: primary_modality: "olfactory" cross_modal_anchors: - touch.warmth - taste.umami somatic_efficacy_link: true negation_score: 0.42 # ─── catalytic edge B ↦ F ──────────────────

代码块 · YAML

.k = key (--a1 deep-blue) · .v = value (--fg) · .c = comment (--fg-4 italic) · .s = string (--a3)

10 · 组件

边注

双栏：左为强调标签，右为正文。用于旁支注释，不打断行文流。

B → F
催化边

躯体层（B）与逻辑桥层（F）之间的催化边，正是定义品类的品牌赢得信任之处。它对寻常的文本分析隐而不见。

Note
备注

否定分高于 0.4 意味着品类正处于活跃的边界定义期。茶的不寻常之处，在于其 98 个签名持续维持着高否定分。

边注

2-col: 120px label (--accent, mono) + 1fr body (serif 14px) · border-top hair · gap 24px

11 · 组件

感官珠

标志性母题。以径向渐变与柔光晕程序化渲染的玻璃球体，用作图版插画或区段标记。渲染自 chrome.js.

感官珠 · 浅色

data-bead-tone="light" · data-bead-size="220"

感官珠 · 深色

data-bead-tone="dark" · on --night background

感官珠 · 带注释

data-bead-annotation="true" · renders SOMA→TRUST + B-LAYER callout lines

12 · 组件

按钮

三种变体。主按钮采用图标+标签的分体结构——填充图标块锚定动作，等宽文字为其命名。悬停可预览 220ms 的强调色过渡。

主按钮 · 分体

Filled icon (--fg bg) + mono text · hover → accent on icon, text, border · 220ms

次按钮 · 描边

0.5px rule border · hover → --fg · disabled: opacity 0.35

文字链接

Mono 10px · 0.5px underline on hover · no border, no background

13 · 组件

感官图标

五个感官维度的单线图标，全部使用 currentColor —— 在所有主题下继承墨色或强调色。悬停预览强调色着色。

Vision

视觉

Olfaction

嗅觉

Gustation

味觉

Audition

听觉

Haptics

触觉

尺寸梯度

16px

24px

40px · 默认

64px

96px · 强调

14 · 组件

表单

为感官评测而设计。强度量表、CATA 复选框与喜好度评分均为一等元素。所有边框皆为分割线；聚焦态使用墨色，而非强调色。

文本输入

产品 / 样品名称本次评测的唯一标识

评测组编号 ↑ 编号格式无效

类别

自由描述

喜好度量表 · 9 点（Peryam & Pilgrim）

总体喜好 — 点击选择

1

2

3

4

5

6

7

8

9

极不喜欢一般极其喜欢

喜好度量表

9 equal-flex cells · active: --fg bg, --bg text · click to select · 0.5px dividers between cells

强度量表 · 模拟滑杆

花香强度5

AbsentExtreme

口感涩度3

AbsentExtreme

强度滑杆

1.5px track · 12px thumb · 0–10 range · hover: accent thumb · live value display right of label

CATA · 多选适用

香气描述词 — 选择所有适用项

花香

青草

甜

木质 / 泥土

烘焙 / 烟熏

果香

矿物

药草

CATA 复选框

14px square box · 0.5px border · .on class adds fill + checkmark · click to toggle · flex-wrap

完整评测表单示例

感官评测 · 茶香

评测组 · 第 03 场 · 2026.05.28

样品编号

类别

总体喜好

1

2

3

4

5

6

7

8

9

极不喜欢极其喜欢

香气描述词

花香

青草

甜

木质

果香

自由描述

感官评测表单

36px padding · 20px gap · 2-col grid for paired fields · scale + CATA + textarea + submit flow

12 · 范式

页面框架

每个页面以等宽页眉行开启，以等宽页脚行收束。两者皆用分割线边框，内容居于其间。

… 页面内容 …

页眉 + 页脚

Mono 10px · justify-between · hair border-bottom (header) / border-top (footer) · uppercase ls 0.18em

13 · 范式

案例行

双栏：左为 1.1fr 图版，右为 1fr 文本。图版带分割线边框，比例 16:11。文本栏含标签、标题、正文与标记。

图片 / 图表占位 Plate · 04

04 · 旗舰案例 · Flagship Case

茶香图集

中国茶香品类中的 98 个叙事密度签名。

98 个签名 PCA · density 已部署 ↗

案例行

2-col: 1.1fr + 1fr · gap 56px · media: 16/11 ratio + hair border · text: label + h1 + body + chips

14 · 范式

双栏

主要行文版式。等宽双栏，间距 56px。用于宣言式命题与成对分析区段。

一、阅读，而非写作

市场已被大模型文案淹没。稀缺在另一侧：对消费者已经写下、说出、嗅入之物的结构化、大体量阅读。

二、领域先于提示

无约束的大模型是一种文学装置。被感官科学分类法约束的大模型，则成为一台带校准刻度的研究仪器。

双栏版式

grid 1fr 1fr · gap 56px · each col: accent label + t-body · max-width 56ch per column

15 · 导出

设计令牌

三套主题的 CSS 自定义属性。可直接复制粘贴至任意项目样式表。JSON 格式适配 Style Dictionary 或 Figma 令牌。